<template>
  <div>
    <h1>Hello Vue</h1>
    <!-- 双向绑定 input里面的内容与username的值互相同步-->
    <input type="text"
           v-model="username">
    <!-- 输出username的值 -->
    <h1>{{username}}</h1>
    <!-- 与JS的if语句相似 -->
    <div v-if="username=='zx'">
      {{username}}
    </div>
    <div v-else-if="username=='aa'">
      aa
    </div>
    <div v-else>
      空的
    </div>
    <!-- 创建名为Show的点击时间，在下面method里面添加该方法 -->
    <button @click="Show()">点击就显示</button>
    <button @click="Hidden()">点击就隐藏</button>
    <!-- 使用下面IsShow属性，如果为ture则显示 -->
    <div v-show="IsShow">v-show指令</div>
    <!-- 返回当前标签内的所有内容 (与属性无关) -->
    <div v-pre>{{pre}}</div>
    <!-- 返回div属性的所有内容 包括div的标签 -->
    <div v-text="div"></div>
    <!-- 以html形式返回div属性的所有内容 -->
    <div v-html="div"></div>
    <!-- 可通过v-bind:或者:来绑定一个属性 添加一个class属性且为他赋值 该值必须是属性里面的值 -->
    <div :class="Class">class</div>
    <!-- 也可用于输出图片 -->
    <img :src="img"
         alt=""
         :width="Iw">
    <!-- 创建表单 -->
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <!-- 遍历userlist 将userlist重命名为item 并定义一个下标值index并作为key值 默认自动递增  -->
      <tr v-for="(item,index) of userlist"
          :key='index'>
        <td>{{item.nickname}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
// 对外输出
export default {
  name: 'HelloWorld',
  //   存放对象的都放在data()里面
  data() {
    return {
      username: 'zx',
      IsShow: false,
      Class: 'a',
      pre: '测试',
      Iw: 200,
      div: '<a href="http://www.baidu.com">进入百度</a>',
      img: 'https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      //   注意二维数组在vue里面第一层之后都是花括号
      userlist: [
        {
          nickname: '棕熊',
          sex: '男',
          age: 18,
        },
        {
          nickname: '杰杰',
          sex: '女',
          age: 18,
        },
        {
          nickname: '可达鸭',
          sex: '保密',
          age: 1,
        },
      ],
    }
  },
  //   存放方法的都放在methods里面
  methods: {
    Show() {
      // 决定<div v-show="IsShow">v-show指令</div>是否显示
      this.IsShow = true
    },
    Hidden() {
      this.IsShow = false
    },
  },
}
</script>